import React, {Component} from 'react';
import {Button, Divider, Input, List, message, Space, Tag} from 'antd';
import {CheckOutlined} from '@ant-design/icons';
import {getUUID} from "../../redux/constant";
import {addPerson} from "../../redux/actions/person_action";
import {connect} from "react-redux";

class Person extends Component {

    addPerson = () => {
        const name = this.nameNode.state.value;
        const age = this.ageNode.state.value;
        if (name === '' || age === '' || name === undefined || age === undefined) {
            return message.error('name or age is null');
        }
        const personObj = {id: getUUID(), name: name, age: age};
        this.props.addPerson(personObj)
        this.nameNode.state.value = '';
        this.ageNode.state.value = '';

    }

    render() {
        return (
            <div>
                <Space size='middle' direction="vertical">
                    <Input ref={c => this.nameNode = c} addonBefore="NAME" placeholder='please input name '/>
                    <Input ref={c => this.ageNode = c} addonBefore="AGE" placeholder='please input age '/>
                    <Button onClick={this.addPerson} icon={<CheckOutlined/>} type="primary">ADD</Button>
                    <Divider orientation="left">Large Size</Divider>
                    <List
                        size="large"
                        header={<div>Count Component Value: <Tag color="magenta">{this.props.countValue}</Tag></div>}
                        // footer={<div>Footer</div>}
                        bordered
                        dataSource={this.props.personList}
                        renderItem={item => <List.Item>{item.name} -- {item.age}</List.Item>}
                    />

                </Space>

            </div>
        );
    }
}


export default connect(state => ({personList: state.personReducer,countValue:state.countReducer}),
    {
        addPerson: addPerson
    })(Person)